<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../common/tag.jsp"%>
<%@ page isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>用户分析</title>
<style type="text/css">
	.btn-primary:active{
	color:white;
	background-color:#576476;
}
	.tableReportDate table{border-bottom:1px solid #F4F5F9}
	.tableReportDate table td{border-top:1px solid #F4F5F9}
</style>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/chosen/chosen.css" rel="stylesheet">
<link href="css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
<link href="css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
<link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
<link href="css/plugins/clockpicker/clockpicker.css" rel="stylesheet">  
<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">  
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>用户分析</h5>
					</div>
					<div class="ibox-content">
						<ul id="userAnalyzeTab" class="nav nav-tabs">
							<li class="active">
								<a href="#userIncrement" data-toggle="tab">
									 用户增长
								</a>
							</li>
							<li><a href="#userProperty" data-toggle="tab">用户属性</a></li>
						</ul>
						<div id="userAnalyzeTabContent" class="tab-content">
						
							<div class="tab-pane fade in active" id="userIncrement">
								<p style="margin-top:12px;">本页根据昨日数据来计算</p>
								<div style="width:100%;height:40px;line-height:37px;padding-left:20px;font-size:14px;font-weight:bold;background-color:#F3F3F4;" >
									昨日关键指标
								</div>
								<div class="wrapper wrapper-content" style="background-color:	#F3F3F4;">
									<div class="row">
										<div class="col-lg-3">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>新关注人数</h5>
												</div>
												<div class="ibox-content">
													<h1 class="no-margins" style="font-weight:bold;"><c:choose><c:when test="${not empty increasedAndLostFansListYesterday[0].new_user}">${increasedAndLostFansListYesterday[0].new_user}</c:when><c:otherwise>0</c:otherwise></c:choose></h1>
												</div>
											</div>
										</div>
										<div class="col-lg-3">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>取消关注人数</h5>
												</div>
												<div class="ibox-content">
													<h1 class="no-margins" style="font-weight:bold;"><c:choose><c:when test="${not empty increasedAndLostFansListYesterday[0].cancel_user}">${increasedAndLostFansListYesterday[0].cancel_user}</c:when><c:otherwise>0</c:otherwise></c:choose></h1>
												</div>
											</div>
										</div>
										<div class="col-lg-3">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>净增关注人数</h5>
												</div>
												<div class="ibox-content">
													<h1 class="no-margins" style="font-weight:bold;">${increasedAndLostFansListYesterday[0].new_user-increasedAndLostFansListYesterday[0].cancel_user}</h1>
												</div>
											</div>
										</div>
										<div class="col-lg-3">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>累计关注人数</h5>
												</div>
												<div class="ibox-content">
													<h1 class="no-margins" style="font-weight:bold;">${accumulativeTotalFansListYesterday[0].cumulate_user}</h1>
												</div>
											</div>
										</div>
									</div>
									<div id="btnGroupDiv" class="btn-group" role="group">
									  <button type="button" class="btn btn-default" style="color:white;background-color:#576476;" onclick="switchReport('incrementFans')">新增人数</button>
									  <button type="button" class="btn btn-default" onclick="switchReport('lostFans')">取消关注人数</button>
									  <button type="button" class="btn btn-default" onclick="switchReport('netIncreasedFans')">净增人数</button>
									  <button type="button" class="btn btn-default" onclick="switchReport('totalFans')">累计人数</button>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>近七日数据报表</h5>
												</div>
												<div class="jumbotron" style="background-color:white;display:inline-block;width:100%;">
												  <div id="fansReport" style="float:left;height:360px;width:100%;"></div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="ibox float-e-margins">
												<div class="ibox-title" style="overflow:hidden">
													<h5 style="float:left;">近七日数据表格</h5>
													<h5 style="float:right;"><button class="btn btn-info" id="button1">导出EXCEL</button></h5>
												</div>
												<div class="jumbotron" style="background-color:white;display:inline-block;width:100%;">
													<div class="tableReportDate">
														<table id="table1" cellpadding="0px" cellspacing="0px" style="width:100%;text-align:right;">
															<tr><td>时间</td><td>新关注人数</td><td>取消关注人数</td><td>净增关注人数</td><td>累计关注人数</td></tr>
															<c:forEach items="${map}" var="item">
																<tr><td>${item.key}</td><td>
																<c:choose>
																<c:when test="${not empty item.value.new_user}">
																	${item.value.new_user}
																</c:when>
																<c:otherwise>
																	0
																</c:otherwise>
															</c:choose></td><td><c:choose>
																<c:when test="${not empty item.value.cancel_user}">
																	${item.value.cancel_user}
																</c:when>
																<c:otherwise>
																	0
																</c:otherwise>
															</c:choose></td><td><c:choose>
																<c:when test="${not empty item.value.new_user && not empty item.value.cancel_user}">
																	${item.value.new_user-item.value.cancel_user}
																</c:when>
																<c:otherwise>
																	0
																</c:otherwise>
															</c:choose></td><td>${item.value.cumulate_user}</td></tr>
															</c:forEach>
															
															
														  </table>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tab-pane fade" id="userProperty">
								暂无
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
</html>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--时间选择-->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<!--下拉框-->
<script src="js/plugins/chosen/chosen.jquery.js"></script>
<script src="js/echarts.js"></script>
<script src="js/plugins/jquery-table2excel-master/src/jquery.table2excel.js"></script>
<script type="text/javascript">
//新增粉丝
var increasedFansListSevenDaysDate = [];
var increasedFansListSevenDaysData = [];
//取关粉丝
var lostFansListSevenDaysDate = [];
var lostFansListSevenDaysData = [];
//净增粉丝
var netIncreasedFansListSevenDaysDate = [];
var netIncreasedFansListSevenDaysData = [];
//累计粉丝
var accumulativeTotalFansListSevenDaysDate = [];
var accumulativeTotalFansListSevenDaysData = [];

<c:forEach items="${increasedAndLostFansListSevenDays}" var="increasedAndLostFansSevenDays">
	increasedFansListSevenDaysDate.push("${increasedAndLostFansSevenDays.ref_date}")
	increasedFansListSevenDaysData.push(parseInt("${increasedAndLostFansSevenDays.new_user}"))
	lostFansListSevenDaysDate.push("${increasedAndLostFansSevenDays.ref_date}")
	lostFansListSevenDaysData.push(parseInt("${increasedAndLostFansSevenDays.cancel_user}"))
</c:forEach>
	
for(var i = 0;i < increasedFansListSevenDaysData.length;i++) {
	netIncreasedFansListSevenDaysDate.push(increasedFansListSevenDaysDate[i]);
	netIncreasedFansListSevenDaysData.push(parseInt(parseInt(increasedFansListSevenDaysData[i]) - parseInt(lostFansListSevenDaysData[i])));
}
	
<c:forEach items="${accumulativeTotalFansListSevenDays}" var="accumulativeTotalFansSevenDays">
	accumulativeTotalFansListSevenDaysDate.push("${accumulativeTotalFansSevenDays.ref_date}")
	accumulativeTotalFansListSevenDaysData.push(parseInt("${accumulativeTotalFansSevenDays.cumulate_user}"))
</c:forEach>

	// 基于准备好的dom，初始化echarts实例
    var fansReportChart = echarts.init(document.getElementById('fansReport'));
	
 // 指定图表的配置项和数据
    var fansReportOption = {
	    title: {      //标题组件
	        text: '近七日新增人数',
	        textStyle: {  
	            fontWeight: 'normal',              //标题颜色  
	            color: '#20B2AA'  
	        },  
	    },
	    tooltip: {    //提示框组件
	        trigger: 'axis'
	    },
	    grid: {       //直角坐标系内绘图网格
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {     //工具栏
	    	show:true,
        	x:'95%',
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {       //直角坐标系 grid 中的 x 轴
	        type: 'category',
	        boundaryGap: false,
	        data: increasedFansListSevenDaysDate,
	        axisLabel: {
	            show: true,
	            textStyle: {
	                color: '#20B2AA'
	            }
	        }
	    },
	    yAxis: {       //直角坐标系 grid 中的 y 轴
	        type: 'value',
	        	axisLabel: {
	                show: true,
	                textStyle: {
	                    color: '#20B2AA'
	                }
	            }
	    },
	    series: [      //系列列表
	        {
	            name: '总粉丝量',
	            type: 'line',
	            stack: '总量',
	            symbol:'circle',
	            symbolSize: 8,
	            areaStyle: {normal: {color:'rgba(78, 238, 148, 0.2)'}},
	            itemStyle : {normal : {color:'#20B2AA',lineStyle:{width:1,color:'#20B2AA'}}},
	            data: increasedFansListSevenDaysData
	        }
	    ]
	};
 
 // 使用刚指定的配置项和数据显示图表。
    fansReportChart.setOption(fansReportOption);

function switchReport(reportType) {
	$("#btnGroupDiv").children().removeAttr("style");
	if(reportType == "incrementFans") {
		$("#btnGroupDiv .btn:eq(0)").css("color","white");
		$("#btnGroupDiv .btn:eq(0)").css("background-color","#576476");
		
		fansReportChart.setOption({        //加载数据图表
			title: {      //标题组件
		        text: '近七日新增人数'
			},
            xAxis: {
                data: increasedFansListSevenDaysDate
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '新增人数',
                data: increasedFansListSevenDaysData
            }]
        });
		
	} else if(reportType == "lostFans") {
		$("#btnGroupDiv .btn:eq(1)").css("color","white");
		$("#btnGroupDiv .btn:eq(1)").css("background-color","#576476");
		
		fansReportChart.setOption({        //加载数据图表
			title: {      //标题组件
		        text: '近七日取消关注人数'
			},
            xAxis: {
                data: lostFansListSevenDaysDate
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '取消关注人数',
                data: lostFansListSevenDaysData
            }]
        });
		
	} else if(reportType == "netIncreasedFans") {
		$("#btnGroupDiv .btn:eq(2)").css("color","white");
		$("#btnGroupDiv .btn:eq(2)").css("background-color","#576476");
		
		fansReportChart.setOption({        //加载数据图表
			title: {      //标题组件
		        text: '近七日净增人数'
			},
            xAxis: {
                data: netIncreasedFansListSevenDaysDate
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '净增人数',
                data: netIncreasedFansListSevenDaysData
            }]
        });
		
	} else if(reportType == "totalFans") {
		$("#btnGroupDiv .btn:eq(3)").css("color","white");
		$("#btnGroupDiv .btn:eq(3)").css("background-color","#576476");
		
		fansReportChart.setOption({        //加载数据图表
			title: {      //标题组件
		        text: '近七日累计人数'
			},
            xAxis: {
                data: accumulativeTotalFansListSevenDaysDate
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '累计人数',
                data: accumulativeTotalFansListSevenDaysData
            }]
        });
		
	} 
}

$("#button1").click(function(){
    $("#table1").table2excel({
        name: "Excel Document Name",
        filename: "userAnalyze"+Date.parse(new Date())+".xls",
        exclude_img: true,
        exclude_links: true,
        exclude_inputs: true
    });
});

</script>